<template>
	<div class="checkCitys">
		<div class="curCity">
			<div class="curCity-title">当前站点</div>
			<!-- <div class="city-item">
				<span v-if='cityshow' class="city-item-text" @click="gocity">{{gpsCity}}</span>
				<span v-else class="city-tips">{{errmsg}}</span>
			</div> -->
            <div class="city-item location">
                <img class="img1" src="../assets/img/icon/home/add.png" alt="">
                <span class="city" v-if='cityshow'>{{gpsCity}}</span>
                <span v-else>{{errmsg}}</span>
            </div>
		</div>
		<div class="openCity">
			<div class="curCity-title">全部站点城市</div>
			<ul class="open-city-item clearfix">
				<li v-for='(item,index) in ktList' :key="index">
            <div class="ItemSpan" :class="{'curBg':curIndex==index}"  @click="goHome(item.siteId,item.mobileName,index)">{{item.mobileName}}</div>
            <!-- <span v-else :class="{'curBg':curIndex==index}" @click="goHome(item.siteId,item.mobileName,index)">{{item.mobileName}}</span> -->
        </li>
			</ul>
		</div>
	</div>
</template>
<script>
import api from '../api/index.js';
import { Toast, Swipe, SwipeItem } from 'mint-ui';

export default {
    data() {
        return {
            ktList: [],
            cityshow: true,
            errmsg: "定位服务未开启",
            gpsCity: '',
            curIndex: '',
            clickRed: true,
        }
    },
    created() {
      // this.cityListReq();
      this.cityReq()
      this.curIndex=sessionStorage.getItem('curIndex');
      this.curCityPass = this.$route.query.name;
      console.log( this.curIndex)

    },
    methods: {
      cityReq() {
      let that = this;
      let cip = returnCitySN["cip"];
        if(cip) {
          let params = {
            ip: cip
          }
          api.cityApi(params).then(res=> {
            // console.log(res)
            this.cityListReq();
            if(res.msgCode='000') {
              if(res.data) { 
                this.curCity = res.data;
                if(this.curCity) {
                  this.gpsCity = this.curCity;
                  this.cityshow=true;
                }else {
                  this.cityshow=false;
                }
              }
            }else {
              Toast({
                    message: res.msg,
                    position: 'middle',
                    duration: 5000
                });
            }
          })
        }
    },
    cityListReq() {
      let obj = {};
      api.cityListApi(obj).then(res=> {
        console.log(res)
        if(res.msgCode='000') {
          this.ktList = res.data.list;
          this.ktList.map((item,index)=> {
              if(this.curCityPass==item.mobileName) {
                this.curIndex = index;
              }  
          })
        }else {
          Toast({
              message: res.msg,
              position: 'middle',
              duration: 5000
          });
        }
      })
    },
    goHome(id,name,index) {
        localStorage.setItem('siteId',id);
        localStorage.setItem('siteName',name);
        sessionStorage.setItem('curIndex',index);
        // this.clickRed = false;
        // this.$router.push({
        //   path: '/',
        //   query: {
        //     cityName: name
        //   }
        // })
        this.$router.go(-1)
    }
    }
}
</script>

<style scoped>
.cityWarp {
  width: 100%;
  height: 100%;
}

.checkCitys {
  padding: 25px 15px;
  min-height: 100vh;
  background-color: #fff;
}

.checkCitys .curCity-title {
  color: #777;
  font-size: 15px;
}

.checkCitys .city-item {
  margin-top: 10px;
}

.checkCitys .city-item .city-item-text {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 37px;
  line-height: 37px;
  background-image: linear-gradient(#da1a1e, #da1a1e),
    linear-gradient(
      50deg,
      #da1a1e 8%,
      #da1a1e 29%,
      #da1a1e 53%,
      #da1a1e 75%,
      #da1a1e 100%
    );
  background-blend-mode: normal, normal;
  border-radius: 5px;
  color: #ffffff;
  margin-right: 15px;
}
.checkCitys .city-tips {
  color: #d8b78d;
  font-size: 13px;
}
.checkCitys .openCity {
  margin-top: 30px;
}
.checkCitys .openCity .curCity-title {
  margin-bottom: 15px;
}
.checkCitys .open-city-item,
.checkCitys .close-city-item {
  margin: 0 -7px;
}
.checkCitys .open-city-item li,
.checkCitys .close-city-item li {
  width: 33.333%;
  float: left;
  text-align: center;
  margin-bottom: 20px;
  padding: 0 7px;
  box-sizing: border-box;
}
.checkCitys .open-city-item li .ItemSpan,
.checkCitys .close-city-item li .ItemSpan {
  display: block;
  height: 35px;
  line-height: 35px;
  /* justify-content: center; */
  padding: 0 5px;
  /* display: flex;
  align-items: center; */
  background-color: #f7f7f9;
  border-radius: 18.5px;
  /* border: solid 1px #cccccc; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checkCitys .close-city-item li .ItemSpan {
  background: #eee;
  border-color: #eee;
  color: #333;
}
.location {
    /* width: 100px; */
    height: 30px;
    /* line-height: 30px; */
    /* position: absolute; */
    top: 10px;
    left: 16px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 15px;
    text-align: left;
    /* padding-left: 13.5px; */
  }
.location .img1 {
    width: 14px;
}
.location .city {
    font-size: 14px;
    color: #1f1f21;
    /* margin: 0 5px 0 14px; */
    margin-left: 6px; 
}
.checkCitys .open-city-item .curBg{
   background-color: #f73657 !important;
    color: #fff;
}
.checkCitys .open-city-item .curBgC{
    background-color: #fff;
    color: #333;
}
</style>
